<template>
	<!-- 报到 -->
	<view class="container page" v-if="info">
		<view class="banner-box mar-t-8" v-if="info.cover" >
				<image  class="banner-item " :src="info.cover" mode="scaleToFill" lazy-load='true'></image>
		</view>
		<view class="pad-b-20">
			<view class="info flex  mar-t-10 ">
				<view class="flex-1">
					<view>
						<text class="font-size-17 font-color-333 font-bold tq-text-line2">{{info.name}}</text>
					</view>
					<view class="mar-t-3">
						<text class="font-size-12 font-color-888 ">
							活动时间：{{transformTime(info.start_time) || ''}} 
						</text>
					</view>
					<view class="mar-t-3">
						<text class="font-size-12 font-color-888 ">
							活动地点：{{info.address}} 
						</text>
					</view>
				</view>
				<!-- <view class="mar-t-7" >
					<text class="act-over-tag text-center">限时报名</text>
				</view> -->
			</view>
			<view class="flex align-center" v-if="info.limit_num>0">
				<view class="flex-1"> <progress :percent="parseInt(info.real_number)/parseInt(info.limit_num)*100"  active stroke-width="8" :border-radius="20" /></view>
				<view class="mar-l-10">
					<text>剩余{{info.real_number}}/{{info.limit_num}}名额</text>
				</view>
			</view>
			
		</view>
		<view class="text-center  mar-t-30">
			<qrcode
				v-if="info"
				cid="qrcode1"
				ref="qrcode"
				:val="info.order_no"
				:size="size"
				:unit="unit"
				:background="background"
				:foreground="foreground"
				:pdground="pdground"
				:icon="icon"
				:iconSize="iconsize"
				:lv="lv"
				:onval="onval"
				:loadMake="loadMake"
				:usingComponents="true"
			></qrcode>
		</view>
		
	</view>
</template>

<script>
import qrcode from '@/components/qrcode'
import {actJoin,actJoinConfirm} from '@/utils/http'

export default {
	components: { qrcode },
	data() {
		return {
			order_no:'',
			ifShow: true,
			val: '二维码的啊23', // 要生成的二维码值
			size: 400, // 二维码大小
			unit: 'upx', // 单位
			background: '#fff', // 背景色
			foreground: '#000', // 前景色
			pdground: '#0088ff', // 角标色
			icon: '', // 二维码图标
			iconsize: 40, // 二维码图标大小
			lv: 1, // 二维码容错级别 ， 一般不用设置，默认就行
			onval: false, // val值变化时自动重新生成二维码
			loadMake: true, // 组件加载完成后自动生成二维码
			src: '', // 二维码生成后的图片地址或base64
			info:'',
		}
	},
	methods:{
		comfirm(){
			actJoinConfirm({order_no:this.order_no}).then(res=>{
				console.log(res);
			})
		}
	},
	onLoad(options){
		this.order_no = options.order_no
		actJoin({order_no:options.order_no}).then(res=>{
			if(res){
				this.info = res;
			}
			
		})
	}
}
</script>

<style scoped>
.banner-box {
	border-radius: 5px;
}
.banner {
	border-radius: 5px;
}
.banner-item {
	height: 150px;
	line-height: 150px;
	border-radius: 5px;
	text-align: center;
	width: 100%;
}
.act-over-tag{
    padding: 3px 10px;
    background-color: #FF4000;
    color: #ffffff;
    border-radius: 10px;
}
.sub-confirm{
	margin: auto;
	margin-top: 30px;
	width: 180px;
	height: 40px;
	line-height: 40px;
	background-color: #0088ff;
	border-radius: 8px;
	color: #ffffff;
}
</style>